.hotexpobox{
    .toptools{
        height: .98rem;
        width: 7.5rem;
        background: #000;
        position: fixed;
        top: .8rem;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .3rem;
        svg{
            width: .5rem;
            transform: rotate(180deg);
        }
        img{
            display: block;
            width: .5rem;
        }
        span{
            font-size: .34rem;
            font-weight: bold;
        }
    }
    // 介绍
    .introduce{
        .mainimg{
            height: 4.58rem;
            width: 7.5rem;
            img{
                display: block;
                width: 7.5rem;
            }
        }
        height: 5.25rem;
        padding: .5rem .3rem ;
        h2{
            text-align: center;
            line-height: .8rem;
            font-size: .38rem;
        }
        .title{
            text-align: center;
            line-height: .4rem;
            font-size: .28rem;
            color: #b57534;
        }
        .content{
            line-height: .4rem;
            font-size: .26rem;
            letter-spacing: .2px;
            color: #a0a0a0;
            text-indent: .8rem;
            display: block;
            height: 2rem;
            overflow: hidden;
            /* 2.用省略号来代替超出文本 */
            text-overflow: ellipsis;
            /* 3.设置盒子属性为-webkit-box  必须的 */
            display: -webkit-box;
            /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
            -webkit-line-clamp: 5;
            /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
            word-break: break-all;
            /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
            -webkit-box-orient: vertical;
        }
        button{
            transition: all .2s;
            display: block;
            border: 0;
            border-radius: 30px;
            width: 1.25rem;
            height: .4rem;
            background: #b57534;
            color: white;
            line-height: .4rem;
            font-size: .22rem;
            margin: .3rem auto;
        }
        button:hover{
            opacity: 0.6;
        }
    }
    // 展览项目
    .itembar{
        p{
            text-align: center;
            line-height: .8rem;
            font-size: .38rem;
        }
    }
    .itemclass{
        padding: 0 .3rem;
        height: .7rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
            font-size: .28rem;
            padding: 0 .3rem;
        }
    }
    .itemdisplaybox{
        height: 10.05rem;
        padding: 0 .3rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: .5rem;
        .item{
            width: 3.34rem;
            height: 4.8rem;
            background: #1b1b1b;
            color: white;
            border-radius: .12rem;
            overflow: hidden;
            img{
                display: block;
                width: 3.34rem;
                height: 3.62rem;
            }
            .name{
                margin-top: .12rem;
                text-align: left;
                line-height: .5rem;
                font-size: .28rem;
            }
            .painter{
                padding: 0 .2rem;
                text-align: left;
                color: #5f5f5f;
                font-size: .24rem;
            }
        }

    }
    .liActive1:nth-child(1){
        background: #b57534;
    }
    .liActive2:nth-child(2){
        background: #b57534;
    }
    .liActive3:nth-child(3){
        background: #b57534;
    }
    .liActive4:nth-child(4){
        background: #b57534;
    }
    .liActive5:nth-child(5){
        background: #b57534;
    }
}